---
name: useMouse
route: /useMouse
menu: 'Other'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

# useMouse

A Hook to track cursor position

## Examples

### Default Usage
<JackBox tsCode={Demo1CodeTsx} jsCode={Demo1CodeJsx} demoName='Default usage' description='tracking cursor position' >
  <Demo1 />
</JackBox>

## API
```
const state: {
  screenX: number, 
  screenY: number, 
  clientX: number, 
  clientY: number,
  pageX: number,
  pageY: number,
} = useMouse();
```

### result

| Property | Description | Type |
|----------|-------------|------|
| screenX     | position left relative to the top left of the physical screen/monitor  | number  |
| screenY     | position top relative to the top left of the physical screen/monitor  | number  |
| clientX     | position left relative to the upper left edge of the content area  | number  |
| clientY     | position top relative to the upper left edge of the content area  | number  |
| pageX     | position left relative to the top left of the fully rendered content area in the browser  | number  |
| pageY     | position top relative to the top left of the fully rendered content area in the browser  | number  |